Initial commitHEADmain

Created from https://vercel.com/new

1 files changed, 61 insertions, 0 deletions

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
new file mode 100644
index 0000000..b2ea2a8
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { useDateRange, useTimezone } from '@/components/hooks';
+import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
+import { PageviewsChart } from '@/components/metrics/PageviewsChart';
+
+export function WebsiteChart({
+  websiteId,
+  compareMode,
+}: {
+  websiteId: string;
+  compareMode?: boolean;
+}) {
+  const { timezone } = useTimezone();
+  const { dateRange, dateCompare } = useDateRange({ timezone: timezone });
+  const { startDate, endDate, unit, value } = dateRange;
+  const { data, isLoading, isFetching, error } = useWebsitePageviewsQuery({
+    websiteId,
+    compare: compareMode ? dateCompare?.compare : undefined,
+  });
+  const { pageviews, sessions, compare } = (data || {}) as any;
+
+  const chartData = useMemo(() => {
+    if (data) {
+      const result = {
+        pageviews,
+        sessions,
+      };
+
+      if (compare) {
+        result.compare = {
+          pageviews: result.pageviews.map(({ x }, i) => ({
+            x,
+            y: compare.pageviews[i]?.y,
+            d: compare.pageviews[i]?.x,
+          })),
+          sessions: result.sessions.map(({ x }, i) => ({
+            x,
+            y: compare.sessions[i]?.y,
+            d: compare.sessions[i]?.x,
+          })),
+        };
+      }
+
+      return result;
+    }
+    return { pageviews: [], sessions: [] };
+  }, [data, startDate, endDate, unit]);
+
+  return (
+    <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
+      <PageviewsChart
+        key={value}
+        data={chartData}
+        minDate={startDate}
+        maxDate={endDate}
+        unit={unit}
+      />
+    </LoadingPanel>
+  );
+}